import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";

const Home = () => import('../components/home/Home.vue');
const Tabs1 = () => import('../components/home/page/Tabs1.vue');
const Tabs2 = () => import('../components/home/page/Tabs2.vue');
const Tabs3 = () => import('../components/home/page/Tabs3.vue');
const Tabs4 = () => import('../components/home/page/Tabs4.vue');
const Tabs5 = () => import('../components/home/page/Tabs5.vue');
const Adm = () => import('../components/adm/Adm.vue');
const Category = () => import('../components/adm/page/Category.vue');
const Adm2 = () => import('../components/adm/page/Adm2.vue');
const Type = () => import('../components/adm/page/Type.vue');
const Adm3 = () => import('../components/adm/page/Adm3.vue');
const Adm4 = () => import('../components/adm/page/Adm4.vue');
const Adm5 = () => import('../components/adm/page/Adm5.vue');
const Adm6 = () => import('../components/adm/page/Adm6.vue');
const AdmAdd = () => import('../components/adm/page/AdmAdd.vue');
const BookAdd = () => import('../components/adm/page/BookAdd.vue');
const Hotupdate = () => import('../components/adm/page/Hotupdate.vue');

const routes = [
	{
		path: '/',
		redirect: {
			name: 'Tabs1'
		}
	},
	{
		path: "/home",
		name: "Home",
		component: Home,
		children: [
			{
				path: '',
				name: 'Tabs1',
				component: Tabs1,
				meta: {
					title: "首页"
				}

			},
			{
				path: 'tabs2',
				name: 'Tabs2',
				component: Tabs2,
				meta: {
					title: '商品详情'
				}
			},
			{
				path: 'tabs3',
				name: 'Tabs3',
				component: Tabs3,
				meta: {
					role: 'P',
					title: '购物车'
				},
			},
			{
				path: 'tabs4',
				name: 'Tabs4',
				component: Tabs4,
				meta: {
					role: 'P',
					title: '订单详情'
				}
			},
			{
				path: 'tabs5',
				name: 'Tabs5',
				component: Tabs5,
				meta: {
					role: 'P',
					title: '个人信息修改'
				}
			}
		]
	},
	{
		path: '/adm',
		name: "Adm",
		component: Adm,
		meta: {
			role: 'G'
		},
		children: [
			{
				path: '',
				name: 'AdmIndex',
				component: () => import('../components/adm/page/index.vue'),
				meta: {
					role: 'G',
					title: "后台首页"
				}
			},
			{
				path: 'category',
				name: "Category",
				component: Category,

			},
			{
				path: 'adm2',
				name: "Adm2",
				component: Adm2,
				meta: {
					title: '商品管理'
				}
			},
			{
				path: 'type',
				name: "Type",
				component: Type,
				meta: {
					title: '类型管理'
				}
			},
			{
				path: 'adm3',
				name: "Adm3",
				component: Adm3,
				meta: {
					title: '热点图片'
				}
			},
			{
				path: 'adm4',
				name: "Adm4",
				component: Adm4,
				meta: {
					title: '订单发货'
				}
			},
			{
				path: 'adm5',
				name: "Adm5",
				component: Adm5,
				meta: {
					title: '用户列表'
				}
			},
			{
				path: 'adm6',
				name: "Adm6",
				component: Adm6,
				meta: {
					title: '管理员添加'
				}
			},
			{
				path: 'admadd',
				name: "AdmAdd",
				component: AdmAdd,
			},
			{
				path: 'bookadd',
				name: "BookAdd",
				component: BookAdd,
			},
			{
				path: 'hotupdate',
				name: "Hotupdate",
				component: Hotupdate,
				meta: {
					title: '书本修改'
				}
			}
		]
	},
];

const router = createRouter({
	history: createWebHashHistory(process.env.BASE_URL),
	routes,
});

// 路由白名单
const whileList = ['/', '/home', '/home/tab2']


// 路由守卫
router.beforeEach((to, form, next) => {
	//1.在任意一个地址跳转的时候,从本地存储中获取当前登录的角色值
	let role = localStorage.getItem('role');

	//没有限制的路由地址也能正常访问
	if (to.meta.role == undefined || to.meta.role == '' || whileList.includes(to.path)) {
		next();
		return;
	}

	//进入后台首页：role是否与规则中的要求匹配
	//判断即将进入的路由规则中限制的访问角色规则 是否与当前登录者的角色匹配

	if (to.meta.role == role) {
		//继续进入
		next();
		return;
	}
	//以上都不需要的路由,默认跳转返回
	router.replace('/').catch((error) => {
		console.log('地址不存在');

	})

})

export default router;